// import React, { useRef } from "react"
import { useState, useEffect, useRef } from "react"
// 问题：这种方式能正确清理定时器吗？
//
// 操作过程如下：
// 1 先点击【+1】按钮 1 次
// 2 再点击【清理定时器】按钮
export default function Counter() {
  const [count, setCount] = useState(0)
  const timerId = useRef(-1)
  // let timerId = -1
  useEffect(() => {
    timerId.current = setInterval(() => {
      console.log("interval")
    }, 1000)
    console.log("timerId111", timerId)
  }, [])

  const clear = () => {
    console.log("timerId", timerId.current)
    clearInterval(timerId.current)
  }
  // 直接获取状态的值
  console.log(count)
  const handleClick = () => {
    setCount(count + 1)
  }
  const getCount = () => {
    setTimeout(() => {
      console.log(count)
    }, 3000)
  }
  return (
    <div>
      <button onClick={handleClick}>+1</button>
      <button onClick={getCount}>延迟获取 count 值</button>
      <button onClick={clear}>清理定时器</button>
      <h1>计数器：{count}</h1>
    </div>
  )
}
